<template>
	<view class="container">
		<view class="form">
			<view class="form-item">
				<view class="label">预约课程</view>
				<view class="content">{{orderInfo.courseTag.courseTagName || ''}}，{{orderInfo.order.lessonNum || 0}}节</view>
			</view>
			<view class="form-item">
				<view class="label">授课私教</view>
				<view class="content">
					<image :src="orderInfo.teacher.sysUser.avatar | formatFile" class="avatar" mode=""></image>
					<text>{{orderInfo.teacher.sysUser.nickName}}</text>
				</view>
			</view>
			<view class="form-item" style="border-bottom: 0;">
				<view class="label">上课时间</view>
				<view class="content" @tap="addUserCourseTime">
					<text class="picker-placeholder" v-if="!orderInfo.courseTime.length">未选择</text>
					<text v-else>{{orderInfo.courseTime.length}}/{{orderInfo.order.lessonNum || 0}}</text>
					<image src="../../static/images/icon-open.png" class="icon-open" mode=""></image>
				</view>
			</view>
			<view class="category-list">
				<view class="category-item active choosed-category" v-for="(item, index) in orderInfo.courseTime">
					<view class="">{{item.chooseDate}}</view>
					<view style="font-size: 28rpx;">{{item.courseTime.startTime}}~{{item.courseTime.endTime}}</view>
				</view>
			</view>
		</view>
		<view class="form">
			<view class="form-item">
				<view class="label">费用</view>
				<view class="content" style="color:#EC1328;font-weight: bold;">￥{{orderInfo.order.payPrice}}</view>
			</view>
		</view>

		<view class="bottom-btn-wrapper price-wrapper flex-x-bet-y-center">
			<view class="left flex-y-center">
				<text>总计：</text>
				<text style="color:#EC1328;font-weight: bold;">￥ {{orderInfo.order.payPrice}}</text>
			</view>
			<view class="right-btn flex-xy-center" @tap="orderPay">去支付</view>
		</view>

		<my-modal ref="payResultModal"></my-modal>
	</view>
</template>

<script>
	import { getOrderInfo, orderPay } from '@/api/common.js'
	import { getUserInfo } from '@/api/user.js'
	export default {
		data() {
			return {
				orderId: '',
				userInfo: {},
				orderInfo: {
					courseTag: {},
					courseTime: [],
					order: {},
					teacher:{
						sysUser:{}
					}
				}
			}
		},
		onLoad(option) {
			this.orderId = option.orderId
		},
		onShow(){
			this.getOrderInfo()
			this.getUserInfo()
		},
		methods: {
			getOrderInfo() {
				getOrderInfo(this.orderId).then(res => {
					const courseTime = res.data.courseTime
					courseTime.forEach(item => {
						item.courseTime.startTime = item.courseTime.startTime.substr(0, item.courseTime.startTime.length - 3)
						item.courseTime.endTime = item.courseTime.endTime.substr(0, item.courseTime.endTime.length - 3)
					})
					this.orderInfo = res.data
					
				})
			},
			getUserInfo(){
				getUserInfo().then(res => {
					this.userInfo = res.data
				})
			},
			// 再次添加时间
			addUserCourseTime(){
				// 已选择足够的节数
				if(this.orderInfo.courseTime.length >= this.orderInfo.order.lessonNum) return
				this.navTo('/pages/teacher/choose_time?orderId=' + this.orderId)
			},
			orderPay(){
				orderPay(this.orderId).then(result => {
					uni.requestPayment({
					  timeStamp: result.data.timeStamp,
					  nonceStr: result.data.nonceStr,
					  package: result.data.packageVal,
					  signType: result.data.signType,
					  paySign: result.data.paySign,
						
					  success: (res) => {
					    uni.hideLoading({})
							// 信息已完善
					    if(this.userInfo.englishName && this.userInfo.age && this.userInfo.sysUser.phonenumber){
								setTimeout(() => {
									uni.setStorageSync('refresh', 1);
									uni.reLaunch({
										url:'/pages/order/index'
									})
								}, 500)
							}else{
								this.$refs.modal.open({
									title: '下单成功~',
									content: '请完善个人信息方便私教与您联系',
									confirmText: '去完善',
									cancelText: '暂不',
									success: () => {
										uni.reLaunch({
											url:'/pages/mine/user_info'
										})
									},
									cancel: () => {
										uni.setStorageSync('refresh', 1);
										uni.reLaunch({
											url:'/pages/order/index'
										})
									}
								})
							}
					  },
					  fail: function (err) {
					    uni.showModal({
					      title: '提示',
					      content: '支付失败',
					      showCancel: false,
					      success: res => {
					        uni.reLaunch({
					        	url:'/pages/order/index'
					        })
					      }
					    })
					  },
					  complete: function () {}
					});
				}).catch(err => {
					setTimeout(() => {
						uni.navigateBack(2)
					})
				})
			},
			toPay() {
				this.$refs.payResultModal.open({
					title: '下单成功~',
					content: '请完善个人信息方便私教与您联系',
					confirmText: '去完善',
					cancelText: '暂不',
					success: () => {

					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background: #F3F3F3;
		padding-top: 1rpx;

		.form {
			margin-top: 30rpx;

			.avatar {
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
				margin-right: 25rpx;
			}
		}
	}

	.category-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding: 0 30rpx 1rpx;
		width: 100%;
		background-color: #fff;

		.category-item {
			padding: 15rpx 0;
			flex: 0 0 calc((100% - 60rpx) / 3);
			margin: 0rpx 30rpx 20rpx 0;
			background: #F8F9FB;
			border: 1rpx solid #F8F9FB;
			border-radius: 16rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
			text-align: center;

		}

		.category-item:nth-of-type(3n) {
			margin-right: 0;
		}

		.disable {
			background: #F8F9FB;
			color: #BEBEBE;
		}

		.active {
			background: #FFFAF7;
			border: 1rpx solid $theme-color;
			color: $theme-color;
		}
	}

	.price-wrapper {
		justify-content: space-between;
		padding-right: 0;
		margin-top: 40rpx;
		height: 118rpx;
		padding-left: 30rpx;
		box-shadow: 0px 2rpx 20rpx 0px rgba(0, 0, 0, 0.1);
	}

	.right-btn {
		width: 312rpx;
		height: 100%;
		background: $theme-color;
		font-size: 34rpx;
		color: #FFFFFF;
	}
</style>